<template>
  <div class="select-sentence">
    <div class="select-sentence-top">
      <div class="select-sentence-top-left">
        <span v-if="isShowTop"> {{ sentenceData.paraphrase }}</span>
        <span v-else class="reminder-text">请听读音</span>
      </div>
      <AudioPlay
        class="fr click"
        ref="audioPlay"
        :type="1"
        :audioSrc="baseURL + sentenceData.audioURL"
      ></AudioPlay>
    </div>
    <div class="study-line"></div>
    <div class="select-sentence-bottom">
      <div class="select-sentence-bottom-left">
        <el-radio-group
          v-model="stuAnswer"
          @change="checkStuAnswer"
          size="small"
          v-if="isShowGroup"
        >
          <el-radio
            v-for="(item, index) in sentenceData.answerList"
            :key="index"
            :label="item.paraphrase"
            :disabled="isChecked"
            border
            :class="[
              isChecked && item.paraphrase == stuAnswer ? 'stu-answer' : '',
              isChecked && item.paraphrase == trueAnswer ? 'true-answer' : '',
            ]"
            >{{ item.paraphrase }}</el-radio
          >
        </el-radio-group>
        <div v-else>{{ sentenceData.sentence }}</div>
      </div>
      <div class="select-sentence-bottom-right">
        <div v-if="iconType == 1" class="click" @click="clickNot">
          <img src="@/assets/img/star-false.png" alt="" />
        </div>
        <div
          v-if="iconType == 2"
          class="select-bottom-practice click"
          @click="goPractice"
        >
          <div class="icon-text">练</div>
        </div>
        <div v-if="iconType == 3" class="click" @click="goNext(4)">
          <img src="@/assets/img/memory-2.png" alt="" />
        </div>
        <div v-if="iconType == 4" class="click" @click="goNext(5)">
          <img src="@/assets/img/memory-1.png" alt="" />
        </div>
        <div v-if="iconType == 5" class="click" @click="goNext()">
          <img src="@/assets/img/memory-next.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import AudioPlay from "@/components/AudioPlay";
import { throttle } from "@/utils/utils";
export default {
  data() {
    return {
      stuAnswer: "",
      trueAnswer: "",
      isChecked: false,
      isShowGroup: true,
      isShowTop: false,
      firstIsTrue: null,
      iconType: 1,
    };
  },
  computed: {},
  methods: {
    playAudio() {
      if (this.$refs.audioPlay) {
        this.$refs.audioPlay.playAudio();
      }
    },
    initCom() {
      this.stuAnswer = "";
      this.isChecked = false;
      this.firstIsTrue = null;
      this.iconType = 1;
      this.isShowTop = false;
      this.isShowGroup = true;
      let trueAnswer = this.sentenceData.answerList.filter((item) => {
        return item.isTrue == 1;
      });
      if (trueAnswer.length > 0) {
        this.trueAnswer = trueAnswer[0].paraphrase;
      }
      this.playAudio();
    },
    checkStuAnswer() {
      this.isChecked = true;
      this.isShowTop = true;
      let isTrue = this.stuAnswer == this.trueAnswer;
      if (this.firstIsTrue !== true && this.firstIsTrue !== false) {
        this.firstIsTrue = isTrue;
      }
      if (isTrue) {
        //   答对了
        this.iconType = 5;
      } else {
        this.iconType = 2;
        this.$nextTick(() => {
          this.playAudio();
        });
        this.$emit("answerFalse");
      }
    },
    clickNot() {
      this.checkStuAnswer();
    },
    goPractice() {
      this.isShowGroup = false;
      this.iconType = 3;
    },
    goNext: throttle(function (iconType) {
      console.log(iconType);
      if (iconType) {
        this.iconType = iconType;
        this.playAudio();
        this.$emit("answerFalse");
      } else {
        this.$emit("answerResult", this.firstIsTrue, () => {
          this.$emit("nextSentence");
        });
      }
    }, 2000),
  },
  mounted() {},
  components: {
    AudioPlay,
  },

  props: {
    sentenceData: {
      type: Object,
    },
  },
};
</script>